<template>
  <div class="home_container">
    <!-- 回到顶部 -->
    <el-backtop :visibility-height="500" :right="10">
      <i class="el-icon-caret-top"></i>
    </el-backtop>

    <!-- 头部区域 -->
    <el-header>
      <!-- Logo -->
      <div class="logo">
        <img src="../assets/imgs/news.png" alt="" />
        <span>我爱新闻网</span>
      </div>

      <!-- 登录按钮 -->
      <el-button v-if="!isLogin" type="primary" plain size="small" round>
        登录
      </el-button>

      <!-- 下拉菜单 -->
      <el-dropdown v-else @command="handleCommand">
        <span class="el-dropdown-link">
          <i class="el-icon-user-solid"></i>用户名
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="Personal">个人信息</el-dropdown-item>
          <el-dropdown-item command="Collection">我的收藏</el-dropdown-item>
          <el-dropdown-item command="Reply">我的回复</el-dropdown-item>
          <el-dropdown-item command="Help">帮助</el-dropdown-item>
          <el-dropdown-item command="Cancellation">注销</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <!-- 页面主体区 -->
    <el-main>
      <!-- 轮播图 -->
      <el-card>
        <el-carousel type="card" height="300px">
          <el-carousel-item v-for="item in pics" :key="item.url">
            <img :src="item.url" style="width: 100%" />
          </el-carousel-item>
        </el-carousel>
      </el-card>

      <el-row :gutter="5">
        <!-- 左边 -->
        <el-col :span="18">
          <!-- 导航栏 -->
          <el-card>
            <el-tabs
              v-model="activeName"
              type="card"
              @tab-click="handleClick"
              stretch
            >
              <el-tab-pane label="最近发生" name="Lately">
                <Article></Article>
              </el-tab-pane>
              <el-tab-pane label="阅读最多" name="Read">
                <Article></Article>
              </el-tab-pane>
              <el-tab-pane label="评论最多" name="Comment">
                <Article></Article>
              </el-tab-pane>
              <el-tab-pane label="招聘信息" name="Recruit">
                <Article></Article>
              </el-tab-pane>
              <el-tab-pane label="公司地址" name="Address">
                <Article></Article>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

        <!-- 右边 -->
        <el-col :span="6">
          <!-- 搜索框 -->
          <el-card>
            <el-input placeholder="请输入内容" v-model="input" clearable>
              <el-button
                slot="append"
                icon="el-icon-search"
                clearable
              ></el-button>
            </el-input>
          </el-card>

          <!-- 排行榜 -->
          <Ranking></Ranking>
        </el-col>
      </el-row>

      <!-- 联系方式 -->
      <Contact></Contact>
      <!-- 底部 -->
      <div class="footer">
        <!-- 版权信息 -->
        <div class="copyright">
          <span>
            Copyright 2021 LoveNews. All Rights Reserved 我爱新闻网 版权所有
          </span>
          <br />
          <span>
            本网站所刊载信息，不代表中新社和中新网观点。
            刊用本网站稿件，务经书面授权。
          </span>
          <br />
          <span>
            未经授权禁止转载、摘编、复制及建立镜像，违者将依法追究法律责任。
          </span>
          <br />
          <span>
            本网站所刊载信违法和不良信息举报电话：15699788000
            举报邮箱：jubao@LoveNews.com.cn 举报受理和处置管理办法
          </span>
          <br />
          <!-- 备案信息 -->
          <span>
            <a> 晋ICP备2020012685号-2 </a>
            &nbsp;|&nbsp;
            <a>
              <img
                src="https://cdn.jsdelivr.net/gh/XueChenda/blog_imgs/img/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87.png"
              />闽公网安备 35080202351227号
            </a>
          </span>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import Article from '../views/Article.vue'
import Ranking from '../views/Ranking.vue'
import Contact from '../views/Contact.vue'
export default {
  components: {
    Article,
    Ranking,
    Contact
  },
  data () {
    return {
      // 轮播图
      pics: [
        { url: require('../assets/imgs/1.png') },
        { url: require('../assets/imgs/2.png') },
        { url: require('../assets/imgs/3.png') },
        { url: require('../assets/imgs/4.png') },
        { url: require('../assets/imgs/5.png') },
        { url: require('../assets/imgs/6.png') }
      ],

      // 输入框
      input: '',

      // 是否登录
      isLogin: false,

      // 标签页首页
      activeName: 'Lately'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped>
.home_container {
  height: 100%;
  background-color: #fff;
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo >>> span {
  margin-left: 15px;
}

.el-icon-user-solid {
  font-size: 25px;
}

.el-dropdown-link {
  font-size: 14px;
}

.el-main {
  padding: 5px;
  min-height: calc(100vh - 120px);
  overflow: hidden;
}

.el-card {
  margin-bottom: 5px;
}

.footer {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 20px;
  margin-bottom: 10px;
}

.copyright {
  color: #58666e;
  font-size: 13px;
  text-align: center;
  line-height: 30px;
}

img {
  vertical-align: middle;
}
</style>>
